<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JCVP Player</title>
		<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
		<!--CSS代码-->
		<link href="/css/jcvp.css" rel="stylesheet">
		<!--JS代码-->
		<script src="/js/jcvp.js"></script>
	</head>

	<body onload="on_page_load()">
		<div id="player_win">
			<label for="switch" style="margin-left:-200px; margin-top:5px">转台使能:</label>
			<label class="switch" id="switch">
				<input type="checkbox" id="jc_zt_switch" onchange="on_jc_zt_switch()"></input> <span class="slider round"></span>
			</label>
			<div id="joystick-container">
				<div id="joystick"></div>
			</div>

			<canvas id="player" width="640" height="512">您的浏览器不支持 HTML5 canvas 标签。</canvas>

			<div id="player_ctrl" style="display: inline-block; text-align: left;">
				<button class="jc_buttons" style="left:0px;" id="jc_set_zoom_sub" onmousedown="on_jc_set_zoom_sub()">ZOOM -</button>
				<button class="jc_buttons" style="left:0px;" id="jc_set_zoom_add" onmousedown="on_jc_set_zoom_add()">ZOOM +</button>
				<label for="jc_auto_zoom" style="padding-left:15px">A变倍:</label>
				<label class="switch" id="jc_auto_zoom">
					<input type="checkbox" id="jc_auto_zoom_switch" onchange="on_jc_auto_zoom_en()"></input> <span class="slider round"></span>
				</label><br>
				<button class="jc_buttons" style="left:0px;" id="jc_set_focus_sub" onmousedown="on_jc_set_focus_sub()">FOCUS-</button>
				<button class="jc_buttons" style="left:0px;" id="jc_set_focus_add" onmousedown="on_jc_set_focus_add()">FOCUS+</button>
				<label for="jc_auto_focus" style="padding-left:15px">A调焦:</label>
				<label class="switch" id="jc_auto_focus">
					<input type="checkbox" id="jc_auto_focus_switch" onchange="on_jc_auto_focus_en()"></input> <span class="slider round"></span>
				</label><br>
				<button class="jc_buttons" style="left:0px;" id="jc_set_apert_sub" onmousedown="on_jc_set_apert_sub()">APERT -</button>
				<button class="jc_buttons" style="left:0px;" id="jc_set_apert_add" onmousedown="on_jc_set_apert_add()">APERT+</button>
				<label for="jc_auto_apert" style="padding-left:15px">A光圈:</label>
				<label class="switch" id="jc_auto_apert">
					<input type="checkbox" id="jc_auto_apert_switch" onchange="on_jc_auto_apert_en()"></input> <span class="slider round"></span>
				</label><br><br>
				<button id="jc_player_record" style="border:none; background-color:red; border-radius:6px;" onclick="on_player_record()">REC</button>
				<label id="js_player_record" for="jc_player_record" style="display:none;padding-left:10px; padding-right:10px; width:60px;">0</label><br>
			</div>
		</div>
		<hr>

		<div class="container">
			<div class="jc_window">
				<p class="jc_bar_title">状态:</p>

				<div class="jc_bar_content">
					<span class="key" id="date_key">date:</span>
					<span class="value" id="date_val">date_str</span>
				</div>
				<div class="jc_bar_content">
					<span class="key" id="time_key">time:</span>
					<span class="value" id="time_val">time_str</span>
				</div>
			</div>

			<div class="vertical_line"> <!-- 竖线的位置 --> </div>

			<div class="jc_window">
				<p class="jc_bar_title">控制:</p>
				<!--raw数据录制-->
				<label style="padding-left:4px; padding-right:4px; background-color:#4C5070">RAW数据采集:</label><br>
				<!--NFS路径配置-->
				<label for="jc_nfs_mount" style="padding-left:15px">NFS路径:</label>
				<input class="jc_inputs" id="jc_nfs_dir" style="width:200px;" type="text" value="<ip_address>:/data_dir" required placeholder="192.168.101.9:/nfs_data" />
				<button class="jc_buttons" id="jc_nfs_mount" onclick="jc_nfs_mount()">挂载</button><br>
				<!--开始录制raw数据-->
				<button class="jc_buttons" id="jc_record_start" onclick="record_raw_send()">raw_record_start</button>
				<label id="js_record_state" for="jc_record_start" style="padding-left:10px; padding-right:10px; width:60px;">0/0</label><br><br>
				<!--调试测试功能-->
				<label style="padding-left:4px; padding-right:4px; background-color:#4C5070">调试测试功能:</label><br>
				<label for="jc_test_zoom" style="padding-left:15px">虚拟ZOOM值:</label>
				<input class="jc_inputs" id="jc_test_zoom" style="width:50px;" type="text" oninput="value=value.replace(/[^\d.]/g, '')" value="0.0" required placeholder="mm" />
				<button class="jc_buttons" id="jc_set_zoom" onclick="jc_set_zoom()">set</button><br>
				<label for="jc_rec_offset" style="padding-left:15px">脱靶量记录:</label>
				<label class="switch" id="jc_rec_offset">
					<input type="checkbox" id="jc_rec_offset_switch" onchange="on_jc_rec_offset_switch()"></input> <span class="slider round"></span>
				</label><br>
				<label for="jc_test_a_track_th" style="padding-left:15px">自动跟踪阈值:</label>
				<input class="jc_inputs" id="jc_test_a_track_th" style="width:40px;height:13px;" type="text" oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null" required placeholder="0~100" />
				<button class="jc_buttons" id="jc_set_a_track_th" onclick="jc_set_auto_track_th()">set</button>
				<label for="jc_auto_track" style="padding-left:15px">自动跟踪使能:</label>
				<label class="switch" id="jc_auto_track">
					<input type="checkbox" id="jc_auto_track_switch" onchange="on_jc_auto_track_en()"></input> <span class="slider round"></span>
				</label><br>
				<label for="jc_local_search" style="padding-left:15px">局部搜索:</label>
				<label class="switch" id="jc_local_search">
					<input type="checkbox" id="jc_local_search_switch" onchange="on_jc_local_search_en()"></input> <span class="slider round"></span>
				</label><br>
			</div>
		</div>
		<hr>

	</body>
</html>

